<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页设计师简历模板</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
    
    :root {
      --primary-color: #ff6b6b;
      --secondary-color: #546de5;
      --dark-color: #2c2c54;
      --light-color: #f7f7f7;
      --text-color: #333;
      --transition: all 0.3s ease;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Montserrat', sans-serif;
      background-color: var(--light-color);
      color: var(--text-color);
      line-height: 1.6;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr;
      overflow: hidden;
    }
    
    header {
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
      color: white;
      padding: 60px 40px;
      text-align: center;
      position: relative;
    }
    
    .header-content {
      position: relative;
      z-index: 2;
    }
    
    .header-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/></svg>');
      opacity: 0.5;
    }
    
    .profile {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
    }
    
    .profile-img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      object-fit: cover;
      border: 5px solid rgba(255, 255, 255, 0.3);
      margin-right: 30px;
    }
    
    .profile-text {
      text-align: left;
    }
    
    .name {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 5px;
    }
    
    .title {
      font-size: 1.2rem;
      font-weight: 400;
      margin-bottom: 15px;
      opacity: 0.9;
    }
    
    .contact-info {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 20px;
    }
    
    .contact-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.9rem;
    }
    
    .main-content {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 30px;
      padding: 40px;
      background-color: white;
    }
    
    @media (max-width: 768px) {
      .profile {
        flex-direction: column;
        text-align: center;
      }
      
      .profile-img {
        margin-right: 0;
        margin-bottom: 20px;
      }
      
      .profile-text {
        text-align: center;
      }
      
      .main-content {
        grid-template-columns: 1fr;
      }
    }
    
    .left-column, .right-column {
      display: flex;
      flex-direction: column;
      gap: 30px;
    }
    
    .section {
      margin-bottom: 20px;
    }
    
    .section-title {
      font-size: 1.3rem;
      color: var(--primary-color);
      margin-bottom: 15px;
      padding-bottom: 5px;
      border-bottom: 2px solid var(--primary-color);
      display: inline-block;
    }
    
    .skills-list {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    .skill-item {
      margin-bottom: 10px;
    }
    
    .skill-name {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      font-size: 0.9rem;
    }
    
    .skill-bar {
      height: 8px;
      background-color: #eee;
      border-radius: 4px;
      overflow: hidden;
    }
    
    .skill-progress {
      height: 100%;
      background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
      border-radius: 4px;
    }
    
    .portfolio {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 15px;
      margin-top: 15px;
    }
    
    .portfolio-item {
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      transition: var(--transition);
    }
    
    .portfolio-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    
    .portfolio-img {
      width: 100%;
      height: 100px;
      object-fit: cover;
    }
    
    .experience-item, .education-item {
      margin-bottom: 25px;
      position: relative;
      padding-left: 20px;
      border-left: 2px solid #eee;
    }
    
    .experience-item::before, .education-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: -8px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background-color: var(--primary-color);
    }
    
    .item-title {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 5px;
      color: var(--dark-color);
    }
    
    .item-subtitle {
      font-size: 1rem;
      color: var(--primary-color);
      margin-bottom: 5px;
    }
    
    .item-date {
      font-size: 0.85rem;
      color: #777;
      margin-bottom: 10px;
      font-style: italic;
    }
    
    .item-description {
      font-size: 0.95rem;
      color: #555;
    }
    
    .project-item {
      margin-bottom: 25px;
      padding: 15px;
      border-radius: 5px;
      background-color: #f9f9f9;
      transition: var(--transition);
    }
    
    .project-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .project-title {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 10px;
      color: var(--dark-color);
    }
    
    .project-tech {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }
    
    .tech-tag {
      font-size: 0.8rem;
      padding: 3px 10px;
      background-color: rgba(84, 109, 229, 0.1);
      color: var(--secondary-color);
      border-radius: 15px;
    }
    
    .project-description {
      font-size: 0.95rem;
      color: #555;
    }
    
    @media print {
      body {
        background-color: white;
      }
      
      .container {
        box-shadow: none;
        max-width: 100%;
      }
      
      .portfolio-item:hover {
        transform: none;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      }
      
      .project-item:hover {
        transform: none;
        box-shadow: none;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="header-bg"></div>
      <div class="header-content">
        <div class="profile">
          <img class="profile-img" src="https://gr-test.oss-cn-shenzhen.aliyuncs.com/02a0271622fba72d55334191e540f2793cee0eee8227010727b0ad469bd8c063.png" alt="个人照片">
          <div class="profile-text">
            <h1 class="name">王五</h1>
            <p class="title">资深网页设计师 / UI/UX设计师</p>
            <div class="contact-info">
              <div class="contact-item">
                <span>📧</span>
                <span>wangwu@example.com</span>
              </div>
              <div class="contact-item">
                <span>📱</span>
                <span>13567890123</span>
              </div>
              <div class="contact-item">
                <span>📍</span>
                <span>广州市天河区</span>
              </div>
              <div class="contact-item">
                <span>🔗</span>
                <span>www.wangwudesign.com</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    
    <div class="main-content">
      <div class="left-column">
        <section class="section">
          <h2 class="section-title">专业技能</h2>
          <div class="skills-list">
            <div class="skill-item">
              <div class="skill-name">
                <span>UI/UX设计</span>
                <span>95%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 95%"></div>
              </div>
            </div>
            <div class="skill-item">
              <div class="skill-name">
                <span>HTML5/CSS3</span>
                <span>90%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 90%"></div>
              </div>
            </div>
            <div class="skill-item">
              <div class="skill-name">
                <span>JavaScript</span>
                <span>85%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 85%"></div>
              </div>
            </div>
            <div class="skill-item">
              <div class="skill-name">
                <span>Photoshop</span>
                <span>95%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 95%"></div>
              </div>
            </div>
            <div class="skill-item">
              <div class="skill-name">
                <span>Illustrator</span>
                <span>90%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 90%"></div>
              </div>
            </div>
            <div class="skill-item">
              <div class="skill-name">
                <span>Figma</span>
                <span>95%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 95%"></div>
              </div>
            </div>
            <div class="skill-item">
              <div class="skill-name">
                <span>响应式设计</span>
                <span>90%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 90%"></div>
              </div>
            </div>
          </div>
        </section>
        
        <section class="section">
          <h2 class="section-title">作品集</h2>
          <div class="portfolio">
            <div class="portfolio-item">
              <img class="portfolio-img" src="https://via.placeholder.com/300x200/ff6b6b/ffffff" alt="作品1">
            </div>
            <div class="portfolio-item">
              <img class="portfolio-img" src="https://via.placeholder.com/300x200/546de5/ffffff" alt="作品2">
            </div>
            <div class="portfolio-item">
              <img class="portfolio-img" src="https://via.placeholder.com/300x200/2c2c54/ffffff" alt="作品3">
            </div>
            <div class="portfolio-item">
              <img class="portfolio-img" src="https://via.placeholder.com/300x200/ff6b6b/ffffff" alt="作品4">
            </div>
            <div class="portfolio-item">
              <img class="portfolio-img" src="https://via.placeholder.com/300x200/546de5/ffffff" alt="作品5">
            </div>
            <div class="portfolio-item">
              <img class="portfolio-img" src="https://via.placeholder.com/300x200/2c2c54/ffffff" alt="作品6">
            </div>
          </div>
        </section>
        
        <section class="section">
          <h2 class="section-title">教育背景</h2>
          <div class="education-item">
            <h3 class="item-title">视觉传达设计 硕士</h3>
            <p class="item-subtitle">中央美术学院</p>
            <p class="item-date">2015 - 2018</p>
            <p class="item-description">主修UI/UX设计、交互设计、用户研究，GPA 3.9/4.0，获得优秀毕业生称号。</p>
          </div>
          
          <div class="education-item">
            <h3 class="item-title">数字媒体艺术 学士</h3>
            <p class="item-subtitle">广州美术学院</p>
            <p class="item-date">2011 - 2015</p>
            <p class="item-description">主修网页设计、平面设计、动画设计，GPA 3.8/4.0，获得校级优秀学生奖学金。</p>
          </div>
        </section>
      </div>
      
      <div class="right-column">
        <section class="section">
          <h2 class="section-title">个人简介</h2>
          <p class="item-description">拥有6年网页设计和UI/UX设计经验的资深设计师，精通用户体验设计和前端开发技术。擅长创建美观且用户友好的界面，注重细节和用户体验。曾为多家知名企业设计网站和应用界面，作品获得多项设计大奖。具备良好的沟通能力和团队协作精神，能够高效地将创意转化为实际产品。</p>
        </section>
        
        <section class="section">
          <h2 class="section-title">工作经历</h2>
          <div class="experience-item">
            <h3 class="item-title">高级UI/UX设计师</h3>
            <p class="item-subtitle">广州创意设计有限公司</p>
            <p class="item-date">2019年3月 - 至今</p>
            <p class="item-description">负责公司核心产品的用户界面设计和用户体验优化，主导了多个大型项目的设计工作，提升了产品用户满意度30%。建立了公司的设计系统和规范，提高了设计团队的工作效率和产出质量。</p>
          </div>
          
          <div class="experience-item">
            <h3 class="item-title">网页设计师</h3>
            <p class="item-subtitle">深圳互联网科技有限公司</p>
            <p class="item-date">2016年7月 - 2019年2月</p>
            <p class="item-description">负责公司网站和移动应用的界面设计，参与用户研究和交互设计，优化用户体验。设计的电商平台界面提升了转化率20%，获得了行业设计奖项。</p>
          </div>
        </section>
        
        <section class="section">
          <h2 class="section-title">项目经验</h2>
          <div class="project-item">
            <h3 class="project-title">电商平台重设计</h3>
            <div class="project-tech">
              <span class="tech-tag">Figma</span>
              <span class="tech-tag">HTML5</span>
              <span class="tech-tag">CSS3</span>
              <span class="tech-tag">JavaScript</span>
              <span class="tech-tag">响应式设计</span>
            </div>
            <p class="project-description">为知名电商平台进行了全面的UI/UX重设计，优化了用户购物流程，提升了移动端体验。通过用户研究和A/B测试，设计了更符合用户习惯的界面，使平台转化率提升了25%，用户停留时间增加了40%。该项目获得了2021年中国设计智造大奖。</p>
          </div>
          
          <div class="project-item">
            <h3 class="project-title">金融服务应用设计</h3>
            <div class="project-tech">
              <span class="tech-tag">Sketch</span>
              <span class="tech-tag">Principle</span>
              <span class="tech-tag">原型设计</span>
              <span class="tech-tag">用户研究</span>
            </div>
            <p class="project-description">为某大型银行设计了移动金融服务应用，简化了复杂的金融操作流程，提高了用户体验。设计了清晰的信息架构和直观的操作界面，使用户能够轻松完成转账、理财等操作。该应用上线后，用户活跃度提升了35%，获得了用户高度评价。</p>
          </div>
          
          <div class="project-item">
            <h3 class="project-title">企业品牌官网设计</h3>
            <div class="project-tech">
              <span class="tech-tag">Photoshop</span>
              <span class="tech-tag">Illustrator</span>
              <span class="tech-tag">HTML5</span>
              <span class="tech-tag">CSS3</span>
              <span class="tech-tag">jQuery</span>
            </div>
            <p class="project-description">为多家企业设计了品牌官网，包括视觉设计、交互设计和前端实现。注重品牌形象的展示和用户体验的优化，设计了响应式布局，确保在各种设备上都有良好的显示效果。其中一个项目获得了2020年中国网页设计大赛金奖。</p>
          </div>
        </section>
      </div>
    </div>
  </div>
</body>
</html>